
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>私有云盘账号登录</title>
		<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
		<style type="text/css">
			@media only screen and (min-width: 450px) {
				.a {
					width: 310px;
					position: absolute;
					left: calc(100% / 2 - 170px);
					margin-top: 150px;
					/*box-shadow: 0px 0px 20px #888888;;*/
					padding: 10px;
					/*padding-top: 5px;*/
					border-radius:1px;
					/*background: rgba(0,0,0,0.3);*/
					
				}
				body {
					/*background: #ddd;*/
					background: #eee;
				}
			}
			.a .other{
					margin-top: 10px;
					display: inline-block;
				}
			.a h2{
					margin-top: 5px;
					margin-bottom: 20px;
					text-align: center;
					color: gray;
				}
			.verification{
				width: 100%;
				margin-bottom: 10px;
			}
			.verification .ver-img img{
				cursor: pointer;
				height: 38px;
				width: 100px;
				border: 1px solid #e6e6e6;
			}
			.verification .ver-input{
				float: right;
				margin: 0;
			}
			.enian-float-right{
				float: right;
			}
			body a{
				cursor: pointer;	
			}
			.qr-login{
				/*height: 300px;
				width: 400px;*/
				/*background: gray;*/
			}
			.qr-login img{
				margin-top: 10px;
				height: 170px;
				
			}
			.qr-login .content{
				margin: auto;
				text-align: center;
			}
			.qr-login .content .text{
				margin-top: 20px;
			}
			.qr-login .content .wxapp-qr{
				color: blueviolet;
			}
			#wxapp-logo{
				position: absolute;
				top: 30px;
				/*border: 1px solid darkgray;*/
				
				left: calc(100% - 50% - 170px / 2);
			}
			#wxapp-logo img{
				border: 1px solid #e6e6e6;
				height: 150px;
			}
			@media only screen and (max-width: 449px) {
				.a {
					width: 90%;
					margin: 60px auto;
				}
			}
		</style>
	</head>

	<body>
		<div class='layui-main a'>
			<h2  class="title">eCloudDisk - 登录</h2>

			<form class="layui-form layui-form-pane" action="" method="POST" lay-filter="login">

				<div class="layui-form-item">
					<input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-form-item">
					<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
				
				<!-- <div class="verification layui-inline">
					<div class="layui-inline ver-img" title="单击刷新">
						<img src="http://enianteam.com/captcha.html" alt="captcha" onclick="this.src=this.src+'?'" />
					</div>
					<div class="layui-inline ver-input">
						<input type="text" name="vcode"  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
					</div>
				</div> -->

				<div class="layui-form-item">
					<div class="other qr_code">
						<!-- <a > 二维码登录 </a> -->
					</div>
					<!-- <div class="enian-float-right">
						<input type="checkbox"  name="Autologin" title="记住密码" lay-skin="primary"> 
					</div> -->
					
				</div>
			
				
				
				<div class="layui-form-item" align="center">
					<button  class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit="" lay-filter="submit-btn">登录</button>
				</div>
				<!-- <a href="">注册账号</a>
				<a class="enian-float-right" href="">忘记密码?</a> -->
				
			</form>
		</div>
		<!-- <script type="text/html" id="tpl-qr-login">
			<div class="qr-login">
				<div id="wxapp-logo" class="layui-hide">
						<img src='/uploads/20190129/bd40b469c789cf9b5871ae1e14d6b328.jpg'>
				</div>
				<div class="content">
					<img src='http://qr.liantu.com/api.php?text=https://wxapp.enianteam.com/index/wxappQr.html?data={{d.qrContent}}'>
					
					<div class="text">
						微信打开<a class="wxapp-qr"> enian </a>小程序后，点击开始扫码
					</div>
					
								
				</div>
				
			</div>
		</script> -->
		
		<script src="/static/layui/layui.js"></script>

		<script>
			layui.use(['form', 'layer','jquery','laytpl'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				var laytpl = layui.laytpl;
				var timeOut
				// var qrContent={
				// 		type:'login'
				// 		,code:false
				// 	};
				
		
				// 提交登录
			  	form.on('submit(submit-btn)', function(data){
				  	// layer.alert(JSON.stringify(data.field), {
				  	//   	title: '最终的提交信息'
				  	// })
				  	$.ajax({
				  		url:'/api/login/login',
				  		type:'post',
				  		data:data.field,
				  		success:function(d){
				  			console.log(d);
				  			if(d.err_code==0){
								// 保存token
								layui.data('userInfo', {
									key: 'token'
									, value: d.data.token
								});

								layer.msg("登录成功")
				  				location.href='/#/index/file_list';
				  			}else{
				  				layer.msg(d.err_msg)
				  			}
				  		}
				  	})
				  	return false;
				});
 
				
				// $('.qr_code').click(function(){
				// 	if(!qrContent['code']){
				// 		getVerificationCode(function(vcode){
							
				// 			qrContent['code'] = vcode;
				// 			var data={
				// 				qrContent :JSON.stringify(qrContent)
				// 			};
				// 			layerQr(data)
							
				// 		})
				// 	}else{
				// 		var data={
				// 				qrContent :JSON.stringify(qrContent)
				// 			};
				// 		layerQr(data)
				// 	}
					
					
				// })
				
// 				function layerQr(data){
// 					laytpl($('#tpl-qr-login').html()).render(data, function(html){
// 						layer.open({
// 						  type: 1,
// 						  title:'扫码登录',
// 						  area: ['400px', '300px'],
// //						  skin: 'layui-layer-demo', //样式类名
// 						  closeBtn: 0, 
// 						  anim: 5,
// 						  shadeClose: true, 
// 						  content: html,
// 						  success:function(){
// 						  	timeOut=window.setInterval(checkTimeout, 2000);
// 						  	$(".wxapp-qr").hover(function(){
// 								$("#wxapp-logo").removeClass('layui-hide');
// 							 },function(){
// 							 	$("#wxapp-logo").addClass('layui-hide');
// 							 })
// 						  },
// 						  end: function(){ 
// 						  	window.clearInterval(timeOut);//关闭定时
// 						  }    
// 						});
// 					});
// 				}
				
				// function checkTimeout(){
				// 	$.ajax({
				// 		type:"post",
				// 		url:"/index/login/clickCode",
				// 		data:qrContent,
				// 		async:true,
				// 		success:function(res){
				// 			console.log(res);
				// 			if(res.code==1){
				// 				layer.closeAll();
				// 				layer.msg('登录成功');
				// 				window.clearInterval(timeOut);//关闭定时
				// 				location.reload()
				// 			}
				// 		}
				// 	});
				// }
				
// 				function getVerificationCode(callback){
// 					$.ajax({
// 						type:"post",
// 						url:"/index/login/verifcationcode/",
// 						success:function(r){
// 							if(r.code==1){
// 								callback(r.verifcationCode);
// 							}else{
// 								layer.alert(r.msg);
// 							}
// 						},
// //						dataType:'jsonp',
// //   					processData: false, 
// 						async:true
// 					});
// 				}
				layer.msg('欢迎使用 eCloudDisk');
			});
		</script>

	</body>

</html>